<template>
	<view class="wallet-container">
		<!-- 顶部余额卡片 -->
		<view class="balance-card">
			<view class="balance-title">我的钱包</view>
			<view class="balance-amount">
				<text class="currency">¥</text>
				<text class="amount">{{balance}}</text>
			</view>
			<view class="balance-actions">
				<button class="action-btn recharge" @tap="handleRecharge">余额充值</button>
				<button class="action-btn withdraw" @tap="handleWithdraw">余额提现</button>
			</view>
		</view>
		
		<!-- 功能菜单 -->
		<view class="menu-list">
			<view class="menu-item" @tap="switchTab('coupon')">
				<view class="menu-left">
					<image class="menu-icon" src="/static/icons/coupon.png" mode="aspectFit"></image>
					<text class="menu-text">我的优惠券</text>
				</view>
				<view class="menu-right">
					<text class="menu-count" v-if="couponCount > 0">{{couponCount}}张可用</text>
					<text class="arrow">></text>
				</view>
			</view>
			
			<view class="menu-item" @tap="switchTab('buyCoupon')">
				<view class="menu-left">
					<image class="menu-icon" src="/static/icons/buy-coupon.png" mode="aspectFit"></image>
					<text class="menu-text">购买优惠券</text>
				</view>
				<view class="menu-right">
					<text class="arrow">></text>
				</view>
			</view>
			
			<view class="menu-item" @tap="switchTab('transaction')">
				<view class="menu-left">
					<image class="menu-icon" src="/static/icons/transaction.png" mode="aspectFit"></image>
					<text class="menu-text">交易明细</text>
				</view>
				<view class="menu-right">
					<text class="arrow">></text>
				</view>
			</view>
		</view>
		
		<!-- 交易明细列表 -->
		<view class="transaction-list" v-if="currentTab === 'transaction'">
			<view class="transaction-item" v-for="(item, index) in transactions" :key="index">
				<view class="transaction-info">
					<text class="transaction-title">{{item.title}}</text>
					<text class="transaction-time">{{item.time}}</text>
				</view>
				<view class="transaction-amount" :class="{'income': item.type === 'income', 'expense': item.type === 'expense'}">
					{{item.type === 'income' ? '+' : '-'}}¥{{item.amount}}
				</view>
			</view>
		</view>
		
		<!-- 优惠券列表 -->
		<view class="coupon-list" v-if="currentTab === 'coupon'">
			<view class="coupon-item" v-for="(coupon, index) in coupons" :key="index" :class="{'expired': coupon.status === 'expired'}">
				<view class="coupon-left">
					<view class="coupon-amount">
						<text class="currency">¥</text>
						<text class="amount">{{coupon.amount}}</text>
					</view>
					<view class="coupon-condition">满{{coupon.minAmount}}元可用</view>
				</view>
				<view class="coupon-right">
					<view class="coupon-title">{{coupon.title}}</view>
					<view class="coupon-time">有效期至：{{coupon.expireTime}}</view>
					<view class="coupon-status">{{getCouponStatus(coupon.status)}}</view>
				</view>
			</view>
		</view>
		
		<!-- 购买优惠券列表 -->
		<view class="buy-coupon-list" v-if="currentTab === 'buyCoupon'">
			<view class="buy-coupon-item" v-for="(item, index) in buyCoupons" :key="index">
				<view class="buy-coupon-info">
					<view class="buy-coupon-title">{{item.title}}</view>
					<view class="buy-coupon-desc">{{item.description}}</view>
					<view class="buy-coupon-time">有效期：{{item.validDays}}天</view>
				</view>
				<view class="buy-coupon-price">
					<text class="price">¥{{item.price}}</text>
					<button class="buy-btn" @tap="handleBuyCoupon(item)">购买</button>
				</view>
			</view>
		</view>
		
		<!-- 充值弹窗 -->
		<uni-popup ref="rechargePopup" type="bottom">
			<view class="recharge-popup">
				<view class="popup-header">
					<text class="popup-title">余额充值</text>
					<text class="close-btn" @tap="closeRechargePopup">×</text>
				</view>
				<view class="recharge-amounts">
					<view 
						v-for="(amount, index) in rechargeAmounts" 
						:key="index"
						:class="['amount-item', selectedAmount === amount ? 'selected' : '']"
						@tap="selectAmount(amount)"
					>
						¥{{amount}}
					</view>
				</view>
				<view class="custom-amount">
					<text class="currency">¥</text>
					<input 
						type="digit" 
						v-model="customAmount"
						placeholder="其他金额"
						@input="handleCustomAmount"
					/>
				</view>
				<button class="confirm-btn" @tap="confirmRecharge">确认充值</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				balance: 1000.00, // 钱包余额
				couponCount: 3, // 可用优惠券数量
				currentTab: 'transaction', // 当前选中的标签
				selectedAmount: 0, // 选中的充值金额
				customAmount: '', // 自定义充值金额
				rechargeAmounts: [50, 100, 200, 500, 1000, 2000], // 充值金额选项
				// 交易明细数据
				transactions: [
					{
						title: '打车支付',
						time: '2024-03-15 14:30',
						amount: 29.9,
						type: 'expense'
					},
					{
						title: '余额充值',
						time: '2024-03-15 10:00',
						amount: 100,
						type: 'income'
					},
					{
						title: '优惠券购买',
						time: '2024-03-14 16:20',
						amount: 9.9,
						type: 'expense'
					}
				],
				// 优惠券数据
				coupons: [
					{
						title: '打车优惠券',
						amount: 10,
						minAmount: 30,
						expireTime: '2024-04-15',
						status: 'valid'
					},
					{
						title: '周末特惠券',
						amount: 15,
						minAmount: 50,
						expireTime: '2024-03-20',
						status: 'valid'
					},
					{
						title: '新用户专享券',
						amount: 20,
						minAmount: 100,
						expireTime: '2024-03-10',
						status: 'expired'
					}
				],
				// 可购买的优惠券数据
				buyCoupons: [
					{
						title: '10元打车券',
						description: '满30元可用，适用于所有车型',
						validDays: 30,
						price: 9.9
					},
					{
						title: '20元打车券',
						description: '满50元可用，适用于舒适型及以上车型',
						validDays: 30,
						price: 19.9
					},
					{
						title: '30元打车券',
						description: '满100元可用，适用于豪华型及以上车型',
						validDays: 30,
						price: 29.9
					}
				]
			}
		},
		methods: {
			// 切换标签
			switchTab(tab) {
				this.currentTab = tab;
			},
			
			// 处理充值
			handleRecharge() {
				this.$refs.rechargePopup.open();
			},
			
			// 关闭充值弹窗
			closeRechargePopup() {
				this.$refs.rechargePopup.close();
				this.selectedAmount = 0;
				this.customAmount = '';
			},
			
			// 选择充值金额
			selectAmount(amount) {
				this.selectedAmount = amount;
				this.customAmount = '';
			},
			
			// 处理自定义金额输入
			handleCustomAmount(e) {
				this.customAmount = e.detail.value;
				this.selectedAmount = 0;
			},
			
			// 确认充值
			async confirmRecharge() {
				const amount = this.selectedAmount || parseFloat(this.customAmount);
				if (!amount || amount <= 0) {
					uni.showToast({
						title: '请输入有效金额',
						icon: 'none'
					});
					return;
				}
				
				try {
					uni.showLoading({ title: '充值中...' });
					// 这里添加实际的充值逻辑
					await new Promise(resolve => setTimeout(resolve, 1500));
					
					this.balance += amount;
					this.transactions.unshift({
						title: '余额充值',
						time: new Date().toLocaleString(),
						amount: amount,
						type: 'income'
					});
					
					uni.hideLoading();
					uni.showToast({
						title: '充值成功',
						icon: 'success'
					});
					this.closeRechargePopup();
				} catch (error) {
					uni.hideLoading();
					uni.showToast({
						title: '充值失败',
						icon: 'error'
					});
				}
			},
			
			// 处理提现
			handleWithdraw() {
				uni.showToast({
					title: '提现功能开发中',
					icon: 'none'
				});
			},
			
			// 获取优惠券状态文本
			getCouponStatus(status) {
				const statusMap = {
					'valid': '可使用',
					'expired': '已过期',
					'used': '已使用'
				};
				return statusMap[status] || status;
			},
			
			// 处理购买优惠券
			async handleBuyCoupon(coupon) {
				try {
					const [err, res] = await uni.showModal({
						title: '确认购买',
						content: `确定要购买${coupon.title}吗？`,
						confirmColor: '#007AFF'
					});
					
					if (err || !res.confirm) return;
					
					if (this.balance < coupon.price) {
						uni.showToast({
							title: '余额不足',
							icon: 'none'
						});
						return;
					}
					
					uni.showLoading({ title: '购买中...' });
					// 这里添加实际的购买逻辑
					await new Promise(resolve => setTimeout(resolve, 1000));
					
					this.balance -= coupon.price;
					this.couponCount++;
					this.transactions.unshift({
						title: '购买优惠券',
						time: new Date().toLocaleString(),
						amount: coupon.price,
						type: 'expense'
					});
					
					uni.hideLoading();
					uni.showToast({
						title: '购买成功',
						icon: 'success'
					});
				} catch (error) {
					uni.hideLoading();
					uni.showToast({
						title: '购买失败',
						icon: 'error'
					});
				}
			}
		}
	}
</script>

<style>
.wallet-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 40rpx;
}

/* 余额卡片样式 */
.balance-card {
	background: linear-gradient(135deg, #007AFF, #00BFFF);
	padding: 40rpx 30rpx;
	color: #ffffff;
	margin-bottom: 20rpx;
}

.balance-title {
	font-size: 32rpx;
	margin-bottom: 20rpx;
}

.balance-amount {
	display: flex;
	align-items: baseline;
	margin-bottom: 40rpx;
}

.currency {
	font-size: 36rpx;
	margin-right: 8rpx;
}

.amount {
	font-size: 72rpx;
	font-weight: bold;
}

.balance-actions {
	display: flex;
	gap: 20rpx;
}

.action-btn {
	flex: 1;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	font-size: 28rpx;
	background-color: rgba(255, 255, 255, 0.2);
	color: #ffffff;
	border: 2rpx solid rgba(255, 255, 255, 0.4);
}

.action-btn.recharge {
	background-color: #ffffff;
	color: #007AFF;
}

/* 菜单列表样式 */
.menu-list {
	background-color: #ffffff;
	margin-bottom: 20rpx;
}

.menu-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.menu-left {
	display: flex;
	align-items: center;
}

.menu-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 20rpx;
}

.menu-text {
	font-size: 28rpx;
	color: #333;
}

.menu-right {
	display: flex;
	align-items: center;
}

.menu-count {
	font-size: 24rpx;
	color: #999;
	margin-right: 10rpx;
}

.arrow {
	font-size: 24rpx;
	color: #999;
}

/* 交易明细样式 */
.transaction-list {
	background-color: #ffffff;
	padding: 0 30rpx;
}

.transaction-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.transaction-info {
	flex: 1;
}

.transaction-title {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 8rpx;
}

.transaction-time {
	font-size: 24rpx;
	color: #999;
}

.transaction-amount {
	font-size: 32rpx;
	font-weight: bold;
}

.transaction-amount.income {
	color: #4CAF50;
}

.transaction-amount.expense {
	color: #ff6b6b;
}

/* 优惠券样式 */
.coupon-list {
	padding: 20rpx;
}

.coupon-item {
	display: flex;
	background-color: #ffffff;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
	position: relative;
}

.coupon-item.expired {
	opacity: 0.6;
}

.coupon-left {
	width: 200rpx;
	background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
	padding: 30rpx 20rpx;
	color: #ffffff;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.coupon-amount {
	display: flex;
	align-items: baseline;
	justify-content: center;
	margin-bottom: 10rpx;
}

.coupon-amount .currency {
	font-size: 24rpx;
}

.coupon-amount .amount {
	font-size: 48rpx;
}

.coupon-condition {
	font-size: 24rpx;
	opacity: 0.8;
}

.coupon-right {
	flex: 1;
	padding: 30rpx;
	position: relative;
}

.coupon-title {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 10rpx;
}

.coupon-time {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 10rpx;
}

.coupon-status {
	font-size: 24rpx;
	color: #ff6b6b;
}

/* 购买优惠券样式 */
.buy-coupon-list {
	padding: 20rpx;
}

.buy-coupon-item {
	background-color: #ffffff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.buy-coupon-info {
	margin-bottom: 20rpx;
}

.buy-coupon-title {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.buy-coupon-desc {
	font-size: 26rpx;
	color: #666;
	margin-bottom: 10rpx;
}

.buy-coupon-time {
	font-size: 24rpx;
	color: #999;
}

.buy-coupon-price {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.price {
	font-size: 36rpx;
	color: #ff6b6b;
	font-weight: bold;
}

.buy-btn {
	background-color: #007AFF;
	color: #ffffff;
	font-size: 26rpx;
	padding: 10rpx 30rpx;
	border-radius: 30rpx;
}

/* 充值弹窗样式 */
.recharge-popup {
	background-color: #ffffff;
	border-radius: 24rpx 24rpx 0 0;
	padding: 30rpx;
}

.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.popup-title {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
}

.close-btn {
	font-size: 40rpx;
	color: #999;
	padding: 10rpx;
}

.recharge-amounts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;
	margin-bottom: 30rpx;
}

.amount-item {
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border: 2rpx solid #ddd;
	border-radius: 8rpx;
	font-size: 28rpx;
	color: #333;
}

.amount-item.selected {
	border-color: #007AFF;
	color: #007AFF;
	background-color: rgba(0, 122, 255, 0.1);
}

.custom-amount {
	display: flex;
	align-items: center;
	border: 2rpx solid #ddd;
	border-radius: 8rpx;
	padding: 0 20rpx;
	margin-bottom: 30rpx;
}

.custom-amount .currency {
	font-size: 32rpx;
	color: #333;
	margin-right: 10rpx;
}

.custom-amount input {
	flex: 1;
	height: 80rpx;
	font-size: 28rpx;
}

.confirm-btn {
	background-color: #007AFF;
	color: #ffffff;
	font-size: 32rpx;
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 44rpx;
}

/* 添加一些动画效果 */
.coupon-item, .buy-coupon-item {
	animation: slideIn 0.3s ease;
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(20rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
</style>
